$fontSize:0.22rem;
$bgColor-f7f7f7:#f7f7f7;
$bgColor-fff:#fff;
$padding-2:0.2rem;
@mixin list-style{
	list-style:none;
}
@mixin box-shadow{
	-moz-box-shadow:-3px 0 0 #f3f3f3;
	-webkit-box-shadow:-3px 0 0 #f3f3f3;
	box-shadow: -3px 0 0 #f3f3f3;
}
@mixin flex{
	display: flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items: center;
}
ul,li{
	@include list-style;
}
html,body{
	width:100%;
	height:100%;
}
.tabs-vertical{
	font-size:$fontSize;
    background-color:$bgColor-f7f7f7;
    box-shadow: 0 0 0.22rem #e2e2e2 inset, 0.04rem 0.02rem 0.03rem #e8e8e8;
    border-radius: 0.02rem;
    ul{
		float: left;
    	text-align: center;
    	li a{
    		display:inline-block;
		    color: #656a6d;
		    padding: 0.3rem 0.16rem;
		    box-sizing:border-box;
		    &.active{
		    	border-left:0.1rem solid #0f0;
			    background-color:$bgColor-fff;
			    box-shadow: 0px 2px 0px #efefef;
		    }
    	}
    }
    .tabs-content-placeholder{
		overflow: hidden;
		height:100vh;
		@include box-shadow;
		background-color: $bgColor-fff;
		.content{
			display: none;
			&.active{
				display: block;
			}
			p{
				font-size: $fontSize;
				color: #565a5c;
			    line-height: 1.5;
			    padding: $padding-2;
			}
		}
    }
}
.tabs-transverse{
	height:100%;
	padding:0 0.2rem;
	overflow:hidden;
    font-size:$fontSize;
    p{
    	@include flex;
    	height:1.68rem;
    	a{
    		flex:1;
		    padding:$padding-2;
		    text-align: center;
		    &.active{
		    	background:#000;
    			color:#fff;
		    }
    	}
    }
    .table {
   		background:#eee;
   		.box{
    		display:none
   		}
	}
}
.footer{
	position:fixed;
	left:0;
	bottom:0;
	z-index:999;
	width:100%;
	height:0.8rem;
	background:$bgColor-f7f7f7;
	text-align:center;
	p{
		font-size: $fontSize;
		line-height: 0.8rem;
		color:#000;
	}
}
